<template>
  <div class="header">
    <div class="searchline">
      <el-button type="primary" :icon="Back" circle @click="pushBack"
        style="position: fixed; top: 5px; left: 5px; z-index: 2;" />
      <i class="ico-search"></i>
      <el-input v-model="input" placeholder="目的地/景点/话题..." style="width: 72%;" />
      <el-button type="primary" text @click="this.$emit('search', input)">搜索</el-button>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Back } from '@element-plus/icons-vue'
export default {
  name: 'SearchBar',
  setup() {
    const input = ref('')
    const router = useRouter()
    const pushBack = () => {
      router.back()
    }
    return {
      input,
      pushBack,
      Back
    }
  }
}
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 12px 0 36px;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

.searchline {
  height: 32px;
  border-radius: 32px;
  line-height: 32px;
  background: #f4f4f4;
  box-shadow: none;
  padding: 0 6px;
  color: #999;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
  flex-grow: 1;
  margin: 0 12px;
  text-align: left;
}

.ico-search {
  display: inline-block;
  width: 12px;
  height: 12px;
  overflow: hidden;
  background: url("../assets/tripshoot_search@3x.png") no-repeat 50%;
  background-size: 12px;
  margin: 0 8px 0 6px;
  vertical-align: -1px;
}
</style>
<style>
.el-input__wrapper {
  background: transparent;
  box-shadow: none;
}

.el-input__wrapper.is-focus {
  box-shadow: none;
}

.el-input__wrapper:hover {
  box-shadow: none;
}
</style>